<template>
    <!-- 城市列表 -->
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 城市管理 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-input v-model="query.name" placeholder="城市名" class="handle-input mr10" @change="citySearch"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="citySearch">搜索</el-button>
            <div class="div-add" style="display: block">
                <el-button style="margin: 10px 0px" type="primary" @click="cityAdd">+ 新增城市</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="index" label="位置" width="50" align="center"></el-table-column>
                <el-table-column prop="cityCode" label="城市编号" align="center"></el-table-column>
                <el-table-column prop="cityName" label="城市名" align="center"></el-table-column>

                <el-table-column prop="isHot" label="是否热门" width="150" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isHot == 0">是</span>
                        <span v-else>否</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="600">
                    <template slot-scope="scope">
                        <el-button type="info" v-model="isHot_s" @click="editHot(scope.$index, scope)">{{
                            scope.row.isHot == 0 ? '取消热门' : '设为热门'
                        }}</el-button>
                        <el-button type="primary" @click="checkCity(scope.$index, scope.row)">查看</el-button>
                        <el-button type="success" @click="cityEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" @click="cityDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="pageNum"
                    :page-size="pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- ----------------------------------------------新增弹出框------------------------------------------------------------- -->
        <el-dialog :visible.sync="addCity" width="60%" @close="dialogEnd">
            <template #title>
                <div v-if="!isEdit">新增城市</div>
                <div v-if="isEdit">编辑城市</div>
            </template>
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="省">
                    <el-select v-model="region" placeholder="请选择">
                        <el-option
                            v-for="item in getCityData"
                            :key="item.areaCode"
                            :label="item.areaName"
                            :value="item.areaCode"
                            @click.native="changeGateway(item)"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="市">
                    <el-select v-model="regions" placeholder="请选择">
                        <el-option
                            v-for="item in getTownData"
                            :key="item.areaCode"
                            :label="item.areaName"
                            :value="item.areaCode"
                            @click.native="changeGateways(item)"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="城市名">
                    <el-input v-model="setName" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="介绍图">
                    <el-upload
                        class="avatar-uploader"
                        :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                        :show-file-list="false"
                        :on-success="cityIntroduceImgEvent"
                        :before-upload="ImgUpload"
                        :data="cityIntroduceImg"
                    >
                        <img style="width: 100%" v-if="form.cityIntroduceImg" :src="form.cityIntroduceImg" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="城市地区图">
                    <el-upload
                        class="avatar-uploader"
                        :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                        :show-file-list="false"
                        :on-success="cityDistrictImgEvent"
                        :before-upload="ImgUpload"
                        :data="cityDistrictImg"
                    >
                        <img style="width: 100%" v-if="form.cityDistrictImg" :src="form.cityDistrictImg" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="城市地区模型图">
                    <el-upload
                        class="avatar-uploader"
                        :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                        :show-file-list="false"
                        :on-success="cityDistrictModelImgEvent"
                        :before-upload="beforeSvgUpload"
                        :data="cityDistrictModelImg"
                    >
                        <img style="width: 100%" v-if="form.cityDistrictModelImg" :src="form.cityDistrictModelImg" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload
                    >请上传svg格式模型图
                </el-form-item>
                <el-form-item label="是否热门">
                    <el-radio key="0" :label="0" v-model="form.isHot">是</el-radio>
                    <el-radio key="1" :label="1" v-model="form.isHot">否</el-radio>
                </el-form-item>
                <el-form-item label="介绍视频">
                    <el-upload
                        class="avatar-uploader"
                        :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                        :on-success="cityIntroduceVideoEvent"
                        :before-upload="videoUpload"
                        :data="cityIntroduceVideo"
                    >
                        <video
                            controls
                            style="width: 100%"
                            v-if="form.cityIntroduceVideo"
                            :src="form.cityIntroduceVideo"
                            class="avatar"
                        ></video>
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="城市商机">
                    <el-upload
                        class="avatar-uploader"
                        :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                        :show-file-list="false"
                        :on-success="cityBusinessEvent"
                        :before-upload="ImgUpload"
                        :data="cityBusiness"
                    >
                        <img style="width: 100%" v-if="form.cityBusiness" :src="form.cityBusiness" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon">背景图</i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="城市故事">
                    <el-upload
                        class="avatar-uploader"
                        :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                        :show-file-list="false"
                        :on-success="cityHistoryEvent"
                        :before-upload="ImgUpload"
                        :data="cityHistory"
                    >
                        <img style="width: 100%" v-if="form.cityHistory" :src="form.cityHistory" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon">背景图</i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="城市会友">
                    <el-upload
                        class="avatar-uploader"
                        :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                        :show-file-list="false"
                        :on-success="cityFriendEvent"
                        :before-upload="ImgUpload"
                        :data="cityFriend"
                    >
                        <img style="width: 100%" v-if="form.cityFriend" :src="form.cityFriend" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon">背景图</i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="特色办礼">
                    <el-upload
                        class="avatar-uploader"
                        :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                        :show-file-list="false"
                        :on-success="SpecialEvent"
                        :before-upload="ImgUpload"
                        :data="SpecialImg"
                    >
                        <img style="width: 100%" v-if="form.SpecialImg" :src="form.SpecialImg" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon">背景图</i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button @click="addCity = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- ===================================================查看弹出框================================================================= -->
        <el-dialog title="查看" :visible.sync="checkLook" width="50%">
            <el-form ref="form" :model="checkForm" label-width="120px">
                <el-form-item label="城市名">
                    <el-input v-model="checkForm.cityName" style="width: 250px" disabled></el-input>
                </el-form-item>
                <el-form-item label="是否热门">
                    <el-radio-group v-model="checkForm.isHot">
                        <el-radio key="0" :label="0" disabled>是</el-radio>
                        <el-radio key="1" :label="1" disabled>否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="介绍图">
                    <el-upload class="avatar-uploader" disabled>
                        <img style="width: 100%" :src="this.$myUrl.IMGURL + checkForm.cityIntroduceImg" class="avatar" />
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="城市地区图">
                    <el-upload class="avatar-uploader" disabled>
                        <img style="width: 100%" :src="this.$myUrl.IMGURL + checkForm.cityDistrictImg" class="avatar" />
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="城市地区模型图">
                    <el-upload class="avatar-uploader" disabled>
                        <img style="width: 100%" :src="this.$myUrl.IMGURL + checkForm.cityDistrictModelImg" class="avatar" />
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="城市介绍视频">
                    <el-upload class="avatar-uploader" disabled>
                        <video :src="checkForm.cityIntroduceVideo" class="avatar" controls></video>
                        <!-- <img :src="this.$myUrl.BASEURL + checkForm.cityIntroduceVideo" class="avatar" /> -->
                        <!-- <i class="el-icon-plus avatar-uploader-icon"></i> -->
                    </el-upload>
                </el-form-item>
                <el-form-item label="城市商机">
                    <el-upload class="avatar-uploader" disabled>
                        <img style="width: 100%" :src="this.$myUrl.IMGURL + lookCityBusiness.menuBackImg" class="avatar" />
                        <!-- <i v-else class="el-icon-plus avatar-uploader-icon">背景图</i> -->
                    </el-upload>
                </el-form-item>
                <el-form-item label="城市会友">
                    <el-upload disabled>
                        <img style="width: 100%" :src="this.$myUrl.IMGURL + lookCityFriend.menuBackImg" class="avatar" />
                        <!-- <i v-else class="el-icon-plus avatar-uploader-icon">背景图</i> -->
                    </el-upload>
                </el-form-item>
                <el-form-item label="城市故事">
                    <el-upload class="avatar-uploader" disabled>
                        <img style="width: 100%" :src="this.$myUrl.IMGURL + lookCityHistory.menuBackImg" class="avatar" />
                        <!-- <i v-else class="el-icon-plus avatar-uploader-icon">背景图</i> -->
                    </el-upload>
                </el-form-item>
                <el-form-item label="特色办礼">
                    <el-upload class="avatar-uploader" disabled>
                        <img style="width: 100%" :src="this.$myUrl.IMGURL + lookSpecialImg.menuBackImg" class="avatar" />
                        <!-- <i v-else class="el-icon-plus avatar-uploader-icon">背景图</i> -->
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="checkLook = false">取 消</el-button>
                <el-button type="primary" @click="cityEdits()" v-if="show == 0">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
//import { fetchData } from '../../api/index';
import axios from 'axios';
export default {
    name: 'city-admin',
    data() {
        return {
            isEdit: false,
            cityIntroduceImg: {
                fileGroup: 'city',
                fileidentName: 'cityIntroduceImg'
            },
            cityDistrictImg: {
                //公司LOGO
                fileGroup: 'city',
                fileidentName: 'cityDistrictImg'
            },
            cityDistrictModelImg: {
                //介绍图
                fileGroup: 'city',
                fileidentName: 'cityDistrictModelImg'
            },
            cityIntroduceVideo: {
                //介绍视频
                fileGroup: 'city',
                fileidentName: 'cityIntroduceVideo'
            },
            menuBackImg: {
                //实景图
                fileGroup: 'city',
                fileidentName: 'menuBackImg'
            },
            SpecialImg: {
                //实景图
                fileGroup: 'city',
                fileidentName: 'menuBackimg'
            },
            cityFriend: {
                //实景图
                fileGroup: 'city',
                fileidentName: 'menuBackimg'
            },
            cityHistory: {
                //实景图
                fileGroup: 'city',
                fileidentName: 'menuBackimg'
            },
            cityBusiness: {
                //实景图
                fileGroup: 'city',
                fileidentName: 'menuBackimg'
            },
            getForm: {
                cityIntroduceImg: '',
                cityDistrictImg: '',
                cityDistrictModelImg: '',
                cityIntroduceVideo: ''
            },
            show: 1,
            getForms: {
                cityBusiness: '',     // cityBusiness
                cityHistory: '',   // cityHistory
                cityFriend: '',   // cityFriend
                SpecialImg: ''   // SpecialImg
            },
            cityId: 0,
            getCityData: [],
            getTownData: [],
            query: {
                address: '',
                name: ''
            },
            tableData: [
                {
                    articleTitle: '标题',
                    author: '作者',
                    authorHeadImg: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3405508716,748611278&fm=26&gp=0.jpg',
                    programaType: '风情'
                }
            ],
            searchData: [],
            form: {
                cityIntroduceImg: '',
                cityDistrictImg: '',
                cityDistrictModelImg: '',
                cityIntroduceVideo: '',
                cityBusiness: '',
                cityHistory: '',
                cityFriend: '',
                SpecialImg: '',
                isHot: 1
            },
            multipleSelection: [],
            delList: [],
            addCity: false,
            editCity: false,
            region: '',
            regions: '',
            pageTotal: 0,
            pageNum: 1,
            pageSize: 10,
            isHot_s: '',
            //form: {},
            idx: -1,
            id: -1,
            cityMenuList: [],
            cityList: [],
            setName: '',
            checkLook: false,
            checkForm: {},
            lookCityBusiness: '',
            lookCityHistory: '',
            lookCityFriend: '',
            lookSpecialImg: '',
            editcityId: ''
        };
    },
    created() {
        this.getData();
        console.log(this.$myUrl.BASEURL);
        // log()
    },
    methods: {
        changeGateway(e) {
            this.regions = '';
            this.setName = '';
            // this.getTownData = []
            // console.log(e);
            //alert(e)
            this.cityId = e.areaCode;
            ////console.log(e)
            this.getData_s();
        },
        changeGateways(e) {
            console.log(e.areaCode);
            axios.get(this.$myUrl.BASEURL + 'city/getCityRepetitionStatus?cityCode=' + e.areaCode).then((res) => {
                // console.log(res.data.data.repetitionStatus);
                if (res.data.data.repetitionStatus == true) {
                    this.$message.error('该城市已重复,请重新选择!');
                }
            });
            this.cityList = e;
            this.setName = e.areaName;
            //console.log(e)
        },
        beforeUpload() {},
        cityIntroduceImgEvent(res, file) {
            this.getForm.cityIntroduceImg = res.data.relativePath;
            this.form.cityIntroduceImg = URL.createObjectURL(file.raw);
            ////console.log(this.form.cityIntroduceImg);
            ////console.log(this.form.cityIntroduceImg);
            ////console.log(this.form.cityIntroduceImg);
        },

        cityDistrictImgEvent(res, file) {
            this.getForm.cityDistrictImg = res.data.relativePath;
            this.form.cityDistrictImg = URL.createObjectURL(file.raw);
        },
        // 城市地区模型图
        cityDistrictModelImgEvent(res, file) {
            console.log();
            this.getForm.cityDistrictModelImg = res.data.relativePath;
            this.form.cityDistrictModelImg = URL.createObjectURL(file.raw);
        },
        cityIntroduceVideoEvent(res, file) {
            this.getForm.cityIntroduceVideo = res.data.relativePath;
            this.form.cityIntroduceVideo = URL.createObjectURL(file.raw);
        },
        menuBackImgEvent(res, file) {
            this.getForm.menuBackImg = res.data.relativePath;
            this.form.menuBackImg = URL.createObjectURL(file.raw);
        },

        SpecialEvent(res, file) {
            this.getForms.SpecialImg = res.data.relativePath;
            this.form.SpecialImg = URL.createObjectURL(file.raw);
        },
        cityFriendEvent(res, file) {
            this.getForms.cityFriend = res.data.relativePath;
            this.form.cityFriend = URL.createObjectURL(file.raw);
        },
        cityHistoryEvent(res, file) {
            this.getForms.cityHistory = res.data.relativePath;
            this.form.cityHistory = URL.createObjectURL(file.raw);
        },
        cityBusinessEvent(res, file) {
            this.getForms.cityBusiness = res.data.relativePath;
            this.form.cityBusiness = URL.createObjectURL(file.raw);
        },

        handleAvatarSuccess() {},
        beforeAvatarUpload() {},
        beforeSvgUpload(file) {
            console.log(file.type);
            const isSvg = file.type === 'image/svg+xml';
            const isLt10M = file.size / 1024 / 1024 < 10;

            if (!isSvg) {
                this.$message.error('请上传svg格式的模型图');
            }
            if (!isLt10M) {
                this.$message.error('地区模型图片大小不能超过 10MB!');
            }
            return isSvg && isLt10M;
        },
        //          上传成功
        uploadSuccess(res, file, fileList) {
            this.editData.topicPic = res;
            this.$message.success('上传成功');
        },

        //         上传失败
        uploadError(err, file) {
            this.$message.error('上传失败');
        },
        cityAdd() {
            this.isEdit = false;
            this.addCity = true;
        },
        checkCity(index, row) {
            console.log(row);
            this.checkLook = true;
            this.checkForm = {};
            this.lookCityBusiness = '';
            this.lookCityHistory = '';
            this.lookCityFriend = '';
            this.lookSpecialImg = '';
            var that = this;
            ////console.log(row)
            axios.get(this.$myUrl.BASEURL + 'city/getCity?cityId=' + row.cityId).then((res) => {
                console.log('城市数据', res);
                this.checkForm = res.data.data;
                // this.checkForm.cityDistrictImg = this.$myUrl.IMGURL+this.checkForm.cityDistrictImg
                // this.checkForm.cityDistrictModelImg = this.$myUrl.IMGURL+this.checkForm.cityDistrictModelImg
                // this.checkForm.cityIntroduceImg = this.$myUrl.IMGURL+this.checkForm.cityIntroduceImg
                this.checkForm.cityIntroduceVideo = this.$myUrl.IMGURL + this.checkForm.cityIntroduceVideo;
                if (this.checkForm.cityMenuList != '') {
                    // this.checkForm.cityMenuList.forEach(res => {
                    //     res.menuBackImg = this.$myUrl.IMGURL + res.menuBackImg;
                    // });

                    this.lookCityBusiness = res.data.data.cityMenuList[0];
                    this.lookCityHistory = res.data.data.cityMenuList[1];
                    this.lookCityFriend = res.data.data.cityMenuList[2];
                    this.lookSpecialImg = res.data.data.cityMenuList[3];
                }
                //console.log(this.lookCityBusiness)
                this.player = new Aliplayer({
                    id: 'J_prismPlayer', // 容器id
                    source: this.checkForm.cityIntroduceVideo, //视频地址
                    cover: 'http://cdn.img.mtedu.com/images/assignment/day_3.jpg', //播放器封面图
                    autoplay: false, // 是否自动播放
                    width: '79%', // 播放器宽度
                    height: '300px', // 播放器高度
                    playsinline: true,
                    skinLayout: [
                        {
                            name: 'bigPlayButton',
                            align: 'blabs',
                            x: 200,
                            y: 130
                        },
                        {
                            name: 'H5Loading',
                            align: 'cc'
                        },
                        {
                            name: 'errorDisplay',
                            align: 'tlabs',
                            x: 0,
                            y: 0
                        },
                        {
                            name: 'infoDisplay'
                        },
                        {
                            name: 'tooltip',
                            align: 'blabs',
                            x: 0,
                            y: 56
                        },
                        {
                            name: 'thumbnail'
                        },
                        {
                            name: 'controlBar',
                            align: 'blabs',
                            x: 0,
                            y: 0,
                            children: [
                                {
                                    name: 'progress',
                                    align: 'blabs',
                                    x: 0,
                                    y: 44
                                },
                                {
                                    name: 'playButton',
                                    align: 'tl',
                                    x: 15,
                                    y: 12
                                },
                                {
                                    name: 'timeDisplay',
                                    align: 'tl',
                                    x: 10,
                                    y: 7
                                },
                                {
                                    name: 'fullScreenButton',
                                    align: 'tr',
                                    x: 10,
                                    y: 12
                                },
                                {
                                    name: 'volume',
                                    align: 'tr',
                                    x: 5,
                                    y: 10
                                }
                            ]
                        }
                    ]
                });
            });
        },

        // -----------------------------新增和编辑城市提交按钮-------------------------------------------

        onSubmit() {
            console.log(this.getForm);
            //console.log(this.cityList)region form.cityDistrictModelImg   this.getForm.cityIntroduceVideo
            if (
                this.getForm.cityBusiness == '' &&
                this.getForm.cityHistory == '' &&
                this.getForm.cityFriend == '' &&
                this.getForm.Special == ''
            ) {
                this.$message.success('');
            } else if (this.region == '') {
                this.$message.error('请选择省');
            } else if (this.regions == '') {
                this.$message.error('请选择市');
            } else if (this.cityName == '') {
                this.$message.error('城市名不能为空');
            } else if (this.form.cityIntroduceImg == '') {
                this.$message.error('请上传城市介绍图');
            }
            //  else if (this.getForm.cityIntroduceVideo == '') {
            //     this.$message.error('请上传城市介绍视频');
            // }
            else if (this.form.isHot === '') {
                this.$message.error('请填写是否热门');
            } else if (this.form.cityDistrictModelImg === '') {
                this.$message.error('请上传城市模型图');
            } 
            else if (this.getForms.cityBusiness === '') {
                this.$message.error('请上传城市商机');
            } else if (this.getForms.cityHistory == '') {
                this.$message.error('请上传城市故事');
            } else if (this.getForms.cityFriend == '') {
                this.$message.error('请上传城市会友');
            } else if (this.getForms.SpecialImg == '') {
                this.$message.error('请上传特色办礼');
            } 
            else {
                this.cityMenuList[0] = { menuType: 0, menuBackImg: this.getForms.cityBusiness };
                this.cityMenuList[1] = { menuType: 1, menuBackImg: this.getForms.cityHistory };
                this.cityMenuList[2] = { menuType: 2, menuBackImg: this.getForms.cityFriend };
                this.cityMenuList[3] = { menuType: 3, menuBackImg: this.getForms.SpecialImg };

                //console.log(this.cityMenuList)

                if (!this.isEdit) {
                    axios
                        .post(this.$myUrl.BASEURL + 'city/addCity', {
                            ...this.getForm,
                            //id:this.cityList.id,

                            cityCode: this.cityList.areaCode,
                            cityName: this.setName,
                            isHot: Number(this.form.isHot),
                            cityMenuList: this.cityMenuList
                        })
                        .then((res) => {
                            console.log(res);
                            if (res.data.code == 200) {
                                this.$message.success('提交成功');
                                this.addCity = false;
                                (this.form.cityIntroduceImg = ''),
                                    (this.form.cityDistrictImg = ''),
                                    (this.form.cityDistrictModelImg = ''),
                                    (this.form.cityIntroduceVideo = ''),
                                    (this.form.cityBusiness = ''),
                                    (this.form.cityHistory = ''),
                                    (this.form.cityFriend = ''),
                                    (this.form.SpecialImg = '');
                                this.getData();
                                this.addCity = false;
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                } else {
                    console.log(this.getForm);
                    axios
                        .put(this.$myUrl.BASEURL + 'city/updateCity', {
                            id: this.editcityId,
                            ...this.getForm,
                            //id:this.cityList.id,

                            cityCode: this.cityList.areaCode,
                            cityName: this.setName,
                            isHot: Number(this.form.isHot),
                            cityMenuList: this.cityMenuList
                        })
                        .then((res) => {
                            console.log(res);
                            if (res.data.code == 200) {
                                this.$message.success('提交成功');
                                this.addCity = false;
                                (this.form.cityIntroduceImg = ''),
                                    (this.form.cityDistrictImg = ''),
                                    (this.form.cityDistrictModelImg = ''),
                                    (this.form.cityIntroduceVideo = ''),
                                    (this.form.cityBusiness = ''),
                                    (this.form.cityHistory = ''),
                                    (this.form.cityFriend = ''),
                                    (this.form.SpecialImg = '');
                                this.$router.push('/city-admin');
                                this.getData();
                                this.addCity = false;
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                }
            }
        },

        // 编辑按钮点击事件
        cityEdit(index, row) {
            // 获取父级省的code
            axios.get(this.$myUrl.BASEURL + 'system/findAreaInfo?areaCode=' + row.cityCode).then((res) => {
                console.log('父级省', res);
                this.region = res.data.data.sortCode;

                axios.get(this.$myUrl.BASEURL + 'system/findAreaList?areaCode=' + res.data.data.sortCode).then((res2) => {
                    console.log('市的列表', res2);
                    this.getTownData = res2.data.data;
                });
            });
            this.regions = row.cityCode;

            this.cityList.areaCode = row.cityCode;
            this.editcityId = row.cityId;
            console.log(row);
            this.isEdit = true;
            // this.checkLook = true;
            axios.get(this.$myUrl.BASEURL + 'city/getCity?cityId=' + row.cityId).then((res) => {
                console.log('城市数据---------------', res);
                let that = res.data.data;

                // ------------------------------------========================================================================-------------------------------------------------------------------------渲染
                this.setName = that.cityName;
                this.form.cityIntroduceImg = this.$myUrl.IMGURL + that.cityIntroduceImg;
                this.getForm.cityIntroduceImg = that.cityIntroduceImg;

                this.form.cityDistrictModelImg = this.$myUrl.IMGURL + that.cityDistrictModelImg;
                this.getForm.cityDistrictModelImg = that.cityDistrictModelImg;

                this.form.cityDistrictImg = this.$myUrl.IMGURL + that.cityDistrictImg;
                this.getForm.cityDistrictImg = that.cityDistrictImg;

                this.form.isHot = that.isHot;
                // 视频
                this.form.cityIntroduceVideo = this.$myUrl.IMGURL + that.cityIntroduceVideo;
                this.getForm.cityIntroduceVideo = that.cityIntroduceVideo;
                // 4图
                this.form.cityBusiness = this.$myUrl.IMGURL + that.cityMenuList[0].menuBackImg;
                this.getForms.cityBusiness = that.cityMenuList[0].menuBackImg;
                this.form.cityHistory = this.$myUrl.IMGURL + that.cityMenuList[1].menuBackImg;
                this.getForms.cityHistory = that.cityMenuList[1].menuBackImg;
                this.form.cityFriend = this.$myUrl.IMGURL + that.cityMenuList[2].menuBackImg;
                this.getForms.cityFriend = that.cityMenuList[2].menuBackImg;
                this.form.SpecialImg = this.$myUrl.IMGURL + that.cityMenuList[3].menuBackImg;
                this.getForms.SpecialImg = that.cityMenuList[3].menuBackImg;

                that.cityMenuList[0].menuBackImg;
                // this.regions = that.id
                // this.region = row.cityId
            });
            this.addCity = true;
        },
        cityEdits(e) {
            ////console.log(this.cityId)
            if (this.getForms.cityBusiness) {
                this.cityMenuList.push({ menuType: 0, menuBackImg: this.getForms.cityBusiness });
            }
            if (this.getForms.cityHistory) {
                this.cityMenuList.push({ menuType: 1, menuBackImg: this.getForms.cityHistory });
            }
            if (this.getForms.cityFriend) {
                this.cityMenuList.push({ menuType: 2, menuBackImg: this.getForms.cityFriend });
            }
            if (this.getForms.SpecialImg) {
                this.cityMenuList.push({ menuType: 3, menuBackImg: this.getForms.SpecialImg });
            }
            console.log(this.cityList.areaCode);
            axios
                .put(this.$myUrl.BASEURL + 'city/updateCity', {
                    ...this.checkForm,
                    id: this.checkForm.id,
                    cityCode: this.cityList.areaCode,
                    cityName: this.cityList.setName,
                    isHot: Number(this.checkForm.isHot),
                    cityMenuList: this.cityMenuList
                })
                .then((res) => {
                    this.checkLook = false;
                    this.$message.success('修改成功');
                    this.getData();
                });
        },
        delVideo() {
            this.checkForm.cityIntroduceVideo = '';
        },

        // 城市列表数据
        getData() {
            axios.get(this.$myUrl.BASEURL + 'system/findAreaList?areaCode=0').then((res) => {
                //console.log(res)
                this.getCityData = res.data.data;
                city / getCityListcity / getCityList;
            });
            axios.get(this.$myUrl.BASEURL + 'city/getCityList?pageNum=' + this.pageNum + '&pageSize=' + this.pageSize).then((res) => {
                this.tableData = res.data.data;
                this.pageTotal = res.data.totalNumber;
                //console.log(res)
            });
        },
        getData_s() {
            axios.get(this.$myUrl.BASEURL + 'system/findAreaList?areaCode=' + this.cityId).then((res) => {
                //console.log(res)
                this.getTownData = res.data.data;
            });
        },
        toDetail() {
            this.$router.push('/content-detail');
        },
        // 获取 easy-mock 的模拟数据
        // getData() {
        //     fetchData(this.query).then((res) => {
        //         //console.log(res);
        //         this.tableData = res.list;
        //         this.pageTotal = res.pageTotal || 50;
        //     });
        // },
        // 触发搜索按钮
        citySearch() {
            this.pageNum = 1;
            this.$set(this.query, 'pageNum', 1);
            //this.getData();
            this.tableData = [];
            axios
                .get(
                    this.$myUrl.BASEURL +
                        'city/getCityList?cityName=' +
                        this.query.name +
                        '&pageNum=' +
                        this.pageNum +
                        '&pageSize=' +
                        this.pageSize
                )
                .then((res) => {
                    //console.log(res)
                    this.tableData = res.data.data;
                    this.pageTotal = res.data.totalNumber;
                });
        },
        editHot(i, r) {
            ////console.log(r)
            var isHots = 0;
            if (r.row.isHot == 0) {
                isHots = 1;
            } else {
                isHots = 0;
            }
            axios.put(this.$myUrl.BASEURL + 'city/updateCityHot?cityId=' + r.row.cityId + '&isHot=' + isHots).then((res) => {
                //console.log(res)
                this.citySearch();
            });
        },
        // 删除操作
        cityDelete(index, row) {
            console.log(row);
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    axios.delete(this.$myUrl.BASEURL + 'city/deleteCity?cityId=' + row.cityId).then((res) => {
                        console.log('删除成功', res);
                        console.log(row.cityId);
                        if (res.data.code == 200) {
                            this.citySearch();
                            this.$message.success('删除成功');
                        }
                    });
                    // this.tableData.splice(index, 1);
                })
                .catch(() => {});
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            const length = this.multipleSelection.length;
            let str = '';
            this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].name + ' ';
            }
            this.$message.error(`删除了${str}`);
            this.multipleSelection = [];
        },
        // 编辑操作
        handleEdit(index, row) {
            this.idx = index;
            this.form = row;
            this.editVisible = true;
            this.isEdit = true;
        },
        // 保存编辑
        saveEdit() {
            this.editVisible = false;
            this.$message.success(`修改第 ${this.idx + 1} 行成功`);
            this.$set(this.tableData, this.idx, this.form);
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageNum', val);
            this.pageNum = val;
            this.getData();
        },
        //
        videoUpload(file) {
            console.log(file);
            const isVideo = file.type === 'video/mp4';
            // const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isVideo) {
                this.$message.error('只能上传视频');
            }
            // if (!isLt2M) {
            //     this.$message.error('上传头像图片大小不能超过 2MB!');
            // }
            return isVideo;
        },
        ImgUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt4M = file.size / 1024 / 1024 < 4;

            if (!isLt4M) {
                this.$message.error('上传大小不能超过 4MB!');
            }
            if (!isJPG) {
                this.$message.error('只能上传JPG/PNG 格式图片!');
            }
            return isJPG && isLt4M;
        },
        dialogEnd() {
            // 清空页面
            this.region = '';
            this.regions = '';
            this.setName = '';
            this.getTownData = [];
            // this.getCityData=[]
            //    this.form = {}
            this.form.cityIntroduceImg = '';
            (this.form.cityIntroduceImg = ''),
                (this.form.cityDistrictImg = ''),
                (this.form.cityDistrictModelImg = ''),
                (this.form.cityIntroduceVideo = ''),
                (this.form.cityBusiness = ''),
                (this.form.cityHistory = ''),
                (this.form.cityFriend = ''),
                (this.form.SpecialImg = '');
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
video {
    width: 100%;
    height: 100%;
}
</style>
